<template>
	<view class="work-container">
		<!-- info属性存取的是轮播图的数据，通过数组长度决定指示点个数 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" :dots-styles="dotsStyles" mode="dot">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="top-content" v-for="(item,index) in postList" :key="index" @tap="tapPostD(item.id)">
			<view class="content-headImage">
				<view class="content-headImage-item">
					<view>
						<image :src="'http://127.0.0.1:8080' + item.avatar"></image>
					</view>
					<view>{{item.nickName}}</view>
					<view class="content-button">
						<view class="content-button-item" @click="handleFollowClick">
							<image src="../../../../static/images/icon/three-tap.png"></image>
						</view>
					</view>
				</view>
				<view class="content-headImage-text">
					<view class="text-wrap">{{item.title}}</view>
				</view>
				<!-- 在此循环图片和视频 -->
				<view class="content-Image-item">
					<image v-show="item.imgUrl" v-for="(item1, index1) in item.imgUrl" :key="index1" :src="item1"
						@tap.stop="tapImage(item1)">
					</image>
					<video v-show="item.videoUrl" v-for="(item2, index2) in item.videoUrl" :key="index2"
						:src="item2"></video>
				</view>
			</view>
			<view class="content-Image-item-icon">
				<view class="child" @tap.stop="actionsClick()">
					<image src="/static/images/banner/share.png"></image>
					<view>分享</view>
				</view>
				<view class="child" @click="actionsComment()">
					<image src="/static/images/banner/comment.png"></image>
					<view>评论</view>
				</view>
				<view class="child" @tap.stop="actionsLike(item.id,item.okCount)">
					<image :src="item.okCount == null? noLike:Liked"></image>
					<!-- <image src="../../../../static/images/icon/ok2.png"></image> -->
					<view>{{item.totalLikeCount}}</view>
				</view>
			</view>
		</view>
		<!-- 悬浮按钮 -->
		<view>
			<uni-fab :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger"></uni-fab>
		</view>

		<!-- 点击帖子右上角三个点 -->
		<view>
			<u-modal :show="show" :title="title" :showConfirmButton="true" :showCancelButton="true" @cancel="cancel"
				@confirm="confirm">
				<view>
					<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
				</view>
			</u-modal>
		</view>
		<!-- 底部提示 -->
		<view v-if="loadmoreStatus">
			<u-loadmore :status="status" :loading-text="loadingText" :nomore-text="nomoreText" />
		</view>

		<!-- 举报成功提示 -->
		<up-notify ref="uNotifyRef" :message="message"></up-notify>
		<!-- 点击分享设置弹框 -->
		<u-popup :show="popup.show" @close="close" :closeable="true" round="5" mode="center">
			<view class="popup-content">
				<view class="popup-content-item">
					<image :src="shareImag"></image>
					<view>分享给朋友</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		getToken
	} from '@/utils/auth' //导入token

	import {
		ref,
		onMounted,
		defineProps,
		watch
	} from "vue";
	//导入onLoad生命周期
	import {
		onLoad,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	import {
		listPost,
		getPost
	} from '@/api/tiezi/post'
	import {
		addOk2,
		listOk
	} from '@/api/ok'
	//引入新增举报接口
	import {
		addReports
	} from '@/api/reports'
	import {
		getUser
	} from '@/utils/auth'
	//取出当前登陆人的userid
	const userid = getUser()
	//加载
	const nomoreText = ref('实在没有了')
	const status = ref('loadmore')
	const loadingText = ref('加载中')
	//轮播图
	const dotsStyles = ref({
		backgroundColor: '#F8F8FF',
		boder: '2rpx rgba(255,90,95,0.3) solid',
		selectedBackgroundColor: 'rgba(255,90,95,0.9)',
		selectedBorder: '2rpx rgba(255,90,95,0.9) solid'
	})
	//多选，选框
	const range = ref([{
			text: '涉嫌欺诈',
			value: 0
		}, {
			text: '色情低俗',
			value: 1
		}, {
			text: '政治敏感',
			value: 2
		}, {
			text: '虚假不实',
			value: 3
		},
		{
			text: '违反公德秩序',
			value: 4
		},
		{
			text: '搬运抄袭',
			value: 5
		}
	])
	//设置层级初始值
	const leState = ref(false)
	//悬浮按钮
	const pattern = ref({
		color: '#7A7E83',
		backgroundColor: '#fff',
		selectedColor: '#000000',
		buttonColor: '#007AFF',
		iconColor: '#fff'
	})

	const horizontal = ref('right')
	const direction = ref('horizontal')
	const vertical = ref('bottom')
	const content = ref([{
			iconPath: '/static/images/icon/post.png',
			selectedIconPath: '/static/images/icon/post01.png',
			text: '帖子',
			active: false
		},
		{
			iconPath: '/static/images/icon/suTitle.png',
			selectedIconPath: '/static/images/icon/suTitle01.png',
			text: '主题',
			active: false
		},
	])

	function trigger(e) {
		// console.log(e, 'nidsac')
		content.value[e.index].active = !e.item.active;
		if (e.item.text == '帖子') {
			uni.switchTab({
				url: '/pages/pluse/components/post/index'
			})
		} else {
			uni.navigateTo({
				url: '/pages/pluse/components/topic/index'
			})
		}
	}
	//接口数据
	const postList = ref([])
	//存储图片数组
	const imagList = ref([])
	// //父组件数据传入子组件数据
	const props = defineProps({
		// 定义一个名为message的prop
		postData: Array,
		status: String,
		loadmoreStatus: Boolean
	})
	const loadmoreStatus = ref(false)
	//父组件传给子组件的数据，在此监听
	watch(props, async (newQuestion, oldQuestion) => {
		postList.value = newQuestion.postData //循环此数组
		imagList.value = postList.value.map(item => item.okCount)
		// console.log(imagList.value, 'imagList.value')
		console.log(postList.value, '111')
		status.value = newQuestion.status
		loadmoreStatus.value = newQuestion.loadmoreStatus
	})
	//点击搜索框时候触发时间跳转到页面
	function tiaoSearchpage() {
		uni.navigateTo({
			url: '/pages/searchPage/searchPage'
		})
	}
	//点击整个帖子触发,将帖子数据传给帖子详情页面
	function tapPostD(id) {
		postId.value = id
		// console.log(postId.value,'postId.value')
		if (leState.value == false) {
			uni.navigateTo({
				url: '/pages/postDetail/index?data=' + id
			})
		}

	}
	//点击图片查看
	function tapImage(item1) {
		//阻止事件冒泡
		// event.stopPropagation();
		//预览图片
		uni.previewImage({
			urls: item1.split(","),
			current: item1,
			loop: true
		})
		console.log('点击了图片')
	}
	//点击三个点显示遮罩层,初始化show
	const show = ref(false)
	const title = ref('举报')
	const uNotifyRef = ref(null);
	const message = ref('举报成功，等待管理员审核')
	const postId = ref()
	const value = ref(0)
	//举报内容
	const reportContent = ref()
	const handleFollowClick = (() => {
		show.value = true
		leState.value = true
		//设置定时器
		setTimeout(() => {
			leState.value = false
		}, 200)
	})
	const cancel = (() => {
		show.value = false
	})
	const confirm = (() => {
		// console.log(reportContent.value, '举报内容是啥')
		addReports({
			postId: postId.value,
			userId: userid,
			reason: reportContent.value
		}).then((res) => {
			// console.log(res, 'res')
			uNotifyRef.value.show({
				type: 'success',
				color: '#000',
				message: '举报成功，等待管理员审核',
				duration: 1000 * 3,
				color: '#fff',
				fontSize: 20,
				safeAreaInsetTop: true
			})
			show.value = false
		})

	})
	//点击数据框，获取举报内容
	const change = ((e) => {
		reportContent.value = e.detail.data.text
	})
	const popup = ref({
		show: false
	})
	//点击关闭
	const close = (() => {
		popup.value.show = false
	})
	const shareImag = ref('../../../../static/images/icon/shareFrinds.png')
	//点击分享
	function actionsClick() {
		popup.value.show = true
	}
	onLoad(() => {
		uni.showShareMenu({
			withShareTicket: true,
			//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			menus: ["shareAppMessage", "shareTimeline"]
		})
	})
	const onShareAppMessage = ((res) => {
		console.log(res, 'onShareAppMessage')
	})
	// //点击评论
	function actionsComment() {
		uni.showToast({
			title: '评论',
			icon: 'none'
		})
	}
	const noLike = ref('/static/images/banner/ok.png') //未点赞
	const Liked = ref('/static/images/banner/ok2.png') //已点赞
	//点击点赞
	function actionsLike(id, okCount) {
		console.log(okCount, 'okCount')
		addOk2({
			postId: id
		}).then((res) => {
			if (okCount == 1) {
				okCount = null
			} else {
				okCount = 1
			}
			console.log(okCount, 'okCount之后')
		})
	}
	//初始化current
	const current1 = ref(0)
	//页面跳转
	const click = ((e) => {
		current1.value = e.index
	})
	const current = ref(0);
	const swiperDotIndex = ref(0);
	//轮播图
	const data = ref([{
			image: 'cloud://wei-3gg5653bbce391e4.7765-wei-3gg5653bbce391e4-1326300694/one.jpg'
		},
		{
			image: '/static/images/banner/banner02.jpg'
		},
		{
			image: '/static/images/banner/banner03.jpg'
		}
	]);


	function clickBannerItem(item) {
		console.info(item)
	};

	function changeSwiper(e) {
		current.value = e.detail.current
	}
</script>

<style lang="scss" scoped>
	.search {
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		pointer-events: auto;

	}

	.swiper-item {
		color: #fff;
		height: 400rpx;

		.image {
			width: 100%;
			height: 1000rpx;
		}

		// line-height: 400rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			border-radius: 40rpx;
			width: 100%;
			margin: 0 auto;
			margin-top: 20rpx;
		}

		.image {
			width: 100%;
		}
	}

	.top-content {
		margin: 15rpx;
		background-color: #F5F5F5;
		border-radius: 15rpx;
		border: 2rpx solid #84AED0;

		// background-color: red;
		.content-headImage {
			padding: 20rpx;

			.content-headImage-item {
				display: flex;
				align-items: center;
				position: relative;

				image {
					margin-right: 10rpx;
					width: 50rpx;
					height: 50rpx;
				}

				.content-button {
					display: flex;
					align-items: center;
				}

				.content-button-item {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}

				.popup-delect {
					position: absolute;
					right: 0rpx;
					font-size: 30rpx;
				}
			}

			.content-headImage-item view:nth-child(2) {
				font-size: 30rpx;
			}

			.content-headImage-text {
				width: 100%;

				.text-wrap {
					width: 100%;
					margin: 25rpx;
					// 设置换行
					white-space: normal;
					overflow: hidden;
					margin-top: 10rpx;
					font-size: 30rpx;
				}
			}


			.content-Image-item {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				/* 创建3列 */
				grid-gap: 10rpx;

				/* 格子之间的间距 */
				image {
					border-radius: 10rpx;
					width: 340rpx;
					height: 340rpx;
					object-fit: cover;
				}

				video {
					width: 340rpx;
					height: 340rpx;
					object-fit: cover;
				}
			}
		}

		.content-Image-item-icon {
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;

			.child {
				display: flex;

				view {
					margin-left: 20rpx;
				}
			}

			image {
				margin-bottom: 10rpx;
				width: 35rpx;
				height: 35rpx;
			}
		}
	}

	.popup-content {
		// width: 100%;
		// height: 300px;
		padding: 120rpx 260rpx;

		// margin: 100rpx;
		image {
			width: 100rpx;
			height: 100rpx;
		}

		.popup-content-item {
			text-align: center;
			margin: 0 auto;
		}
	}
</style>